<template>
  <div>
    <div id="chart101"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "@/utils/request";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  computed:{
    // ...mapState(["areaCode"]),
    ...mapGetters(["areaCode"]),
  },
  watch: {
    areaCode: {
      handler(newVal, oldVal) {
        this.getList();
      },
      deep: true,
    },
  },
  methods: {
    echartsFn(arr) {
      // 真实后端数据
      const annularList = arr;
      let total = 0;
      arr.forEach(item=>{
        total+=item.value
      })
      // [
      //   { value: 8, name: "断层" },
      //   { value: 8, name: "积水区" },
      //   { value: 10, name: "陷落柱" },
      // ];
      // 颜色
      // const colorList = {
      //   断层: ["#54A8FF", "#8AC4FF"],
      //   积水区: ["#B6E8D0", "#70D3A3"],
      //   陷落柱: ["#AC7BE0", "#D9C2F1"],
      // };
      const colorList = [
      ["#54A8FF", "#8AC4FF"],
       ["#B6E8D0", "#70D3A3"],
       ["#AC7BE0", "#D9C2F1"],
      ]
      // 组装数据
      const newAnnularList = annularList.map((item,index) => {
        return {
          ...item,
          itemStyle: {
            color: new echarts.graphic.RadialGradient(0, 0, 1, [
              {
                offset: 0,
                color: colorList[index][0],
              },
              {
                offset: 1,
                color: colorList[index][1],
              },
            ]),
          },
        };
      });

      // 配置项
      const option = {
        backgroundColor: "transparent",
        title: {
          text:  "{name|" + total + "}\n{val|"  + '总数' + "}",
          left: "center", // 对齐方式居中
          top: "40%", // 距离顶部
          left: "20%", // 对齐方式居中
          textStyle: {
            // 文字配置
            // color: "#04DBF1", // 文字颜色
            fontSize: 24, // 字号
            align: "center", // 对齐方式
            width: "100", // 宽度.
            rich: {
              name: {
                fontSize: 24,
                fontWeight: "normal",
                color: "#04DBF1",
                padding: [5, 5],
              },
              val: {
                fontSize: 14,
                fontWeight: "normal",
                padding: [0, 0],
                color: "#fff",
                // padding: [0, 10],
              },
            },
          },
        },
        tooltip: {
          show: true,
          // formatter: "{a} <br/>{b}: {c} ({d}%)",
          backgroundColor: "#0B2C54", // 提示框浮层的背景颜色。
          borderRadius: 5,
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#fff",
          },
        },
        
        legend: {
          right: "right",
          top: "center",
          textStyle: {
            color: "#fff", // 文字颜色
            fontSize: 12, // 字号
            rich: {
              name: {
                width: 60,
                align: "left",
              },
              value: {
                width: 10,
                align: "right",
              },
            },
          },
          formatter: (name) => {
            let res = annularList.filter((v) => v.name === name);
            name=name.length>6?name.substring(0,6)+'...':name
            res = res[0] || {};
            if(res?.value==undefined){
              return (
              "{name|" +
              name +
              "}{value|" +
              0 +
              "}"
            );
            }else{
              return (
              "{name|" +
              name +
              "}{value|" +
              res?.value +
              "}"
            );
            }
          },
          tooltip: {
            show: true,
            trigger: 'item',
            backgroundColor: '#0B2C54',
            borderColor: '#fff',
            formatter: function (params) {
              let res = annularList.filter((v) => v.name === params.name);
              res = res[0] || {};
              if(res?.value==undefined){
                return params.name + '：' + 0
              }else{
                return params.name + '：' + res?.value
              }
            },
          }
        },
        series: [
          {
            name: "断层信息",
            type: "pie",
            padAngle: 10,
            radius: ["35%", "55%"],
            center:['25%', '50%'],
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#183F6B",
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "outside",
              formatter: (params) => {
                if (params.name == "断层") {
                  // return "{a| " + params.value + "}\n{a| " + params.percent + "%}";
                  return "{a| " + params.name + "}\n{a| " + params.value + "}";
                } else if (params.name == "积水区") {
                  return "{b| " + params.name + "}\n{b| " + params.value + "}";
                } else {
                  return "{c|" + params.name + "}\n{c| " + params.value + "}";
                }
              },
              rich: {
                a: {
                  color: "#54A8FF",
                  align: "left",
                  padding: 4,
                },
                b: {
                  color: "#70D3A3",
                  align: "left",
                  padding: 4,
                },
                c: {
                  color: "#AC7BE0",
                  align: "left",
                  padding: 4,
                },
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 30,
            },
            data: newAnnularList,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    getList(){
      axios.get("/dataview/hydrology/getAreaSafetyGradeSeamFault",{
        params: {
          areaCode: this.areaCode,//换三维对应的区域编码
          // areaName:''
        }
      }).then((res) => {
        if(res.data){
          this.echartsFn(res.data);
        }
      })
    }
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chart101"));
    // 为窗口的resize事件绑定事件处理函数
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  created() {
    this.getList();
  },
  beforeDestroy() {
    // this.myChart.dispose()//销毁
    this.myChart.clear(); //销毁
  },
};
</script>

<style scoped lang="scss">
#chart101 {
  width: 100%;
  height: 300px;
}
</style>